<template>
  <div id="adminMovieOrderPage">
    <h1>我的订单</h1>
    <el-card v-for="data in dataList" :key="data.id" class="custom-card">
      <el-row class="grid-demo" style="margin-bottom: 16px">
        <el-col :span="12" class="content-wrapper">
          <p>订单号：{{ data.id }}</p>
          <p>{{ data.movieName }}</p>
          <p>
            {{ data.theaterName }} {{ data.theaterAddress }}
            {{ HALL_TYPE_MAP[data.hallType] }} {{ data.seat?.row }}排{{
              data.seat?.column
            }}座
          </p>
          <p>{{ dayjs(data.showTime).format("YYYY-MM-DD HH:mm") }}</p>
        </el-col>
        <el-col :span="12">
          <el-icon
            class="delete"
            :size="20"
            @click="deleteOrder(data.id as number)"
          >
            <Delete />
          </el-icon>
          <el-button
            v-if="data.orderStatus as number === 0"
            type="danger"
            plain
            class="buy-button"
            @click="handlePay(data.id as number)"
          >
            支付
          </el-button>
          <el-button
            v-if="data.orderStatus as number === 1"
            type="primary"
            class="buy-button"
            @click="handlePay(data.id as number)"
          >
            查看
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-pagination
      :page-size="searchParams.pageSize"
      :current-page="searchParams.current"
      @size-change="onPageChange"
      @current-change="onPageChange"
      layout="prev, pager, next"
      :page-count="pageCount"
    />
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  reactive,
  ref,
  watchEffect,
  withDefaults,
} from "vue";

import API from "@/api";
import { getMovieVoByIdUsingGet } from "@/api/movieController";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { getMovieShowVoByIdUsingGet } from "@/api/movieShowController";
import {
  deleteMovieOrderUsingPost,
  listMovieOrderVoByPageUsingPost,
  listMyMovieOrderVoByPageUsingPost,
} from "@/api/movieOrderController";
import { useRouter } from "vue-router";
import { useLoginUserStore } from "@/store/userStore";
import { HALL_TYPE_MAP } from "../../constant/movie";

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 6,
};

const searchParams = ref<API.MovieOrderQueryRequest>({
  ...initSearchParams,
});

const dataList = ref<API.MovieOrderVO[]>([]);
const pageCount = ref<number>(5);

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};
/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listMyMovieOrderVoByPageUsingPost({
    ...searchParams.value,
    sortField: "createTime",
  });
  if (res.data.code === 0) {
    dataList.value = (res.data.data?.records as any) || [];
    pageCount.value = Math.ceil(
      (res.data.data?.total as number) / searchParams?.value?.pageSize ?? 5
    );
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

watchEffect(() => {
  loadData();
});

const router = useRouter();

const handlePay = (id: number) => {
  router.push(`/movie_order/detail/${id}`);
};

/**
 * 删除订单
 */
const deleteOrder = async (id: number) => {
  const res = await deleteMovieOrderUsingPost({
    id: id,
  });
  if (res.data.code === 0) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    loadData();
  } else {
    ElMessage({
      message: "删除失败，" + res.data.message,
      type: "error",
    });
  }
};
</script>

<style scoped>
#adminMovieOrderPage {
  .custom-card {
    position: relative;
  }

  .buy-button {
    position: absolute;
    right: 16px;
    bottom: 16px;
  }

  .delete {
    position: absolute;
    right: 20px;
  }
}

#movieOrderDetailPage .content-wrapper > p {
  margin-bottom: 24px;
}
</style>
